<script>
import {ref} from 'vue'
import UserStatistics from "../../components/DataShow/UserStatistics.vue";
import currentTime from  '../../utils/NeedTime.js'
// import PieUser from "../../components/DataShow/PieUser.vue";
// import UserIncome from "@/components/DataShow/UserIncome.vue";
import UserDetailShow from "@/views/user/UserDetailShow.vue";
export default {
  name: "Home",
  components:{
    UserDetailShow,
    UserStatistics,
    // PieUser,
    // UserIncome
  },
  data() {
    return {
      lastIp:'',
      activeName : ref('first'),
      enrollment:1,
      user:'',
      loginTime:currentTime
    }
  },
  mounted() {
  },
  created() {
    this.lastIp = sessionStorage.getItem('ip')
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
  }
}

</script>

<template>
  <div style="margin: 50px">
    <el-row>
      <el-col><h1> Data Statistics <small>login:{{lastIp}}{{loginTime}}</small></h1></el-col>
      <el-col>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="UserDetailShow" name="first">

            <UserDetailShow />

          </el-tab-pane>
          <el-tab-pane label="Information" name="second">
<!--            <pie-user />-->
          </el-tab-pane>
          <el-tab-pane label="say" name="third">
            <el-row gutter="10">
              <el-col :span="12">
                <el-card>

                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card :style="{width: '600px', height: '500px'}">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="el-alert alert-pink" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="el-alert alert-pink" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="el-alert alert-green" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="el-alert alert-green" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="el-alert alert-gray" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="el-alert alert-gray" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="el-alert alert-blue" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="el-alert alert-blue" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="el-alert alert-purple" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="el-alert alert-purple" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="el-alert alert-yellow" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="el-alert alert-yellow" role="alert">
                        <div>
                          <span>error alert</span>
                          <p >more text description</p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>

          </el-tab-pane>


        </el-tabs>
      </el-col>

    </el-row></div>
</template>
<style scoped>
.el-col {
  border-radius: 4px;
}
.el-row{
  margin-bottom: 10px;
}
.alert-pink {
  background-color: #fde2e2;
  color:  #f89898;
}
.alert-blue{
  background-color: #c6e2ff;
  color: #32C2CD;
}
.alert-green{
  background-color: #e1f3d8;
  color: #b3e19d;
}
.alert-yellow{
  background-color: #faecd8;
  color: #f3d19e;
}
.alert-gray{
  background-color:#DCDFE6;
  color:#909399;
}
.alert-purple{
  background-color:#E5CCFF;
  color: #6b778c;
}

h1 {
  font-size: 50px;
}
h3{
  font-size: 40px;
  color: #8A8A8A;
}
strong{
  font-size: 15px;
}


.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

</style>
